<script setup>
import { Menu as IconMenu } from '@element-plus/icons-vue'
import { useHomeRouters } from '@/stores/homeRouter';
import { onMounted,ref } from 'vue';
import { useToken } from '@/stores/token.js'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

var isLoad = false;

const homeRouters = useHomeRouters();
const routers = ref(homeRouters.getHomeRouters());

const tokenStore = useToken();

onMounted(async () => {
  //加载路由信息
  const LocalRouters = await JSON.parse(localStorage.getItem('homeRouters'))
  if (!isLoad && LocalRouters) {
    homeRouters.setHomeRouters(LocalRouters);
    isLoad = true;
  }
  routers.value = homeRouters.getHomeRouters();
  console.log('Home-view:routers:', routers);
  //加载token
  const token = localStorage.getItem('token')
  tokenStore.setToken(token);
  console.log('Home-view:token:',  tokenStore.getToken());
});

</script>
<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" @open="handleOpen" @close="handleClose" router="true">

        <el-menu-item  index=''>
          <el-icon><icon-menu /></el-icon>
          <span>教师评价考核系统</span>
        </el-menu-item>

        <el-menu-item v-for="(item) in routers" :key="item.id" :index='item.path'>
          <el-icon><icon-menu /></el-icon>
          <span>{{ item.menuName }}</span>
        </el-menu-item>

      </el-menu>
    </el-col>
  </el-row>
  <div class="view-container">
    <router-view></router-view>
  </div>
</template>

<style scoped lang="less">
.el-row {
  position: absolute;
  top: 0px;
  left: 0px;

  .el-menu {
    height: 100vh;
    width: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
}

.view-container {
  position: relative;
  width: 1390px;
  height: 100vh;
}
</style>
